<template>
  <div class="articleShow">
    <el-card class="box-card" shadow="never">
      <div class="card-header">
        <span class="text-large">精选文章</span>
      </div>
      <div class="my-divider-black-middle"></div>

      <div class="content" v-loading="loading">
        <div class="content-list">
          <div class="list-item" v-for="item in articleList.slice(0, 5)" :key="item.article_id"
            @click="goDetails(item.article_id)">
            <div class="text-middle">{{ item.title }}</div>
            <div class="text-middle hits">阅读量：{{ item.hits }}</div>
          </div>
        </div>
        <div class="my-divider-grey-middle"></div>

        <div class="btn">
          <el-button class="button-more text-middle" text @click="loadMore">
            更多文章
            <DArrowRight style="width: 1em; height: 1em; margin-right: 8px" />
          </el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { DArrowRight } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { navBarSelectState } from '@/stores/info/index'
import ArticleApi from '@/api/article'
import type { ArticleData } from '@/api/article/types'
import { ElMessage } from 'element-plus'

const router = useRouter()
const selectedBar = navBarSelectState()

// 文章列表数据
const articleList = ref<ArticleData[]>([])
const loading = ref(true)
const currentPage = ref(1)
const pageSize = ref(6)
const total = ref(0)

// 获取文章列表
const getArticleList = async () => {
  try {
    loading.value = true
    const response = await ArticleApi.getArticles({
      Page: currentPage.value,
      Size: pageSize.value,
      is_delete: 0,
      review_status: 1,
      is_recommend: 1
    })
    
    // 直接使用返回的数组数据
    if (Array.isArray(response.data)) {
      articleList.value = response.data
      total.value = response.data.length  // 或者使用后端返回的总数
    } else {
      articleList.value = []
      total.value = 0
      console.log('Invalid data format')
    }
  } catch (error) {
    ElMessage.error('获取文章列表失败')
    console.error('获取文章列表失败:', error)
    articleList.value = []
    total.value = 0
  } finally {
    loading.value = false
  }
}

// 查看文章详情
const goDetails = (articleId: number) => {
  router.push({
    name: 'articleDetail',
    params: { id: articleId }
  })
}

// 加载更多文章
const loadMore = () => {
  selectedBar.setSelected(4)
  router.push({
    name: 'articlePage',
  })
}

// 组件挂载时获取文章列表
onMounted(() => {
  getArticleList()
})
</script>

<style scoped>
.list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  cursor: pointer;
  transition: all 0.3s;
  border-bottom: 1px solid #f0f0f0;
}

.list-item:hover {
  background-color: #f5f7fa;
}

.hits {
  color: #909399;
  font-size: 14px;
  min-width: 100px;
  text-align: right;
}

.btn {
  text-align: center;
  margin-top: 20px;
}

.button-more {
  color: #818488;
}

.button-more:hover {
  color: #818488;
}

/* 加载状态样式 */
.el-loading-mask {
  background-color: rgba(255, 255, 255, 0.8);
}
</style>
